<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Upload 上传2</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<a href='Upload.html' class='layui-btn0'>基础用法，覆盖前一个文件，用户头像上传，照片墙，自定义缩略图</a>
	<a href='Upload2.html' class='layui-btn'>图片列表缩略图，上传文件列表控制，拖拽上传，手动上传</a>
	<el-affix :offset="20">
		<el-button type="primary" @click="showValue">查看所选数据</el-button>
	</el-affix>
	
	<el-divider content-position="left">图片列表缩略图</el-divider><!-- =============================================================== -->
	<el-upload class="upload-demo w500" action="http://oa.qiqiao.com/common/common/uploaddemo"
	:on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
		<el-button size="small" type="primary">上传图片</el-button>
		<template #tip><div class="el-upload__tip">小于500kb的Jpg /png图片</div></template>
	</el-upload>
	
	<el-divider content-position="left">上传文件列表控制</el-divider><!-- =============================================================== -->
	<p class="desc">通过 on-change 钩子函数来对列表进行控制</p>
	<el-upload class="upload-demo w500" action="#" :on-change="handleChange" :on-preview="handlePreview" :file-list="fileList">
		<el-button size="small" type="primary">上传图片</el-button>
		<template #tip><div class="el-upload__tip">小于500kb的Jpg /png图片</div></template>
	</el-upload>
	
	<el-divider content-position="left">拖拽上传</el-divider><!-- =============================================================== -->
	<p class="desc">你可以将文件拖拽到特定区域以进行上传。</p>
	<el-upload class="upload-demo w500" drag action="http://oa.qiqiao.com/common/common/uploaddemo" multiple :on-preview="handlePreview">
		<el-icon class="el-icon--upload"><upload-filled /></el-icon>
		<div class="el-upload__text">拖拽文件到这里或 <em>点击上传</em></div>
		<template #tip><div class="el-upload__tip">小于500kb的Jpg /png图片</div></template>
	</el-upload>
	
	<el-divider content-position="left">手动上传</el-divider><!-- =============================================================== -->
	<p class="desc"></p>
	<p class="desc"></p>
	<el-upload ref="upload" class="upload-demo w500" action="https://jsonplaceholder.typicode.com/posts/" multiple :auto-upload="false">
		<template #trigger><el-button size="small" type="primary">选择图片</el-button></template>
		<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
		<template #tip><div class="el-upload__tip">小于500kb的Jpg /png图片</div></template>
	</el-upload>
	
	
</div>
</body>
<script>

const Main = {
	data() {
		return {
			value: '',
			fileList: [
				{name: 'food.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',},
				{name: 'food2.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',},
			],
		}
	},
	methods:{
		handleRemove(file, fileList) {
			console.log(file, fileList)
		},
		handlePreview(file) {
			//加了 list-type="picture" 之后这里就不生效了
			console.log(file)
		},
		handleChange(file, fileList) {
			//仅仅保留最后3张图片
			this.fileList = fileList.slice(-3)
		},
		submitUpload() {
			this.$refs.upload.submit()
		},
		
		showValue(){
			console.log(this.$data.value, this.$data.value);
		},
	},
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
let vm = app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
